:root {
    --root-webp-time: 5;
    --root-webp-captain-type-1-url: 'https://i1.xuehusang.cn/openlivechat-css/fullScreenCele/default_captain_1_loop.webp';
    --root-webp-captain-type-2-url: 'https://i1.xuehusang.cn/openlivechat-css/fullScreenCele/default_captain_2_loop.webp';
    --root-webp-captain-type-3-url: 'https://i1.xuehusang.cn/openlivechat-css/fullScreenCele/captain_test_loop_2.webp';
    --root-custom-words-1: '';
}

#body-box {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}

.full-screen-cele {
    animation: fadeOut 1s ease 4s forwards;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.darkScene {
    position: absolute;
    top: 0;
    left: 0;
    animation: fadeIn 1s forwards, fadeOut 1s ease 4s forwards;
    width: 1920px;
    height: 1080px;
    opacity: 0;
    z-index: -2;
    content: '';
}

.avatar {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px white, 0 0 0 20px #6fabdd;
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) 1s forwards, fadeOut 1s ease 4s forwards;
}
.avatar[guard_level='2'] {
    box-shadow: 0 0 0 10px white, 0 0 0 20px #9671dc;
}
.avatar[guard_level='1'] {
    box-shadow: 0 0 0 10px white, 0 0 0 20px #dc7171;
}

.uname {
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    font-weight: bolder;
    color: white;
    background-color: #6fabdd;
    box-shadow: 0 0 0 10px #b4d2ea, 0 0 0 20px white;
    padding: 2px 80px;
    border-radius: 50px;
    opacity: 0;
    animation: fadeInUp 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.2s forwards, fadeOut 1s ease 4s forwards;
}
.uname[guard_level='2'] {
    box-shadow: 0 0 0 10px #c7b3ec, 0 0 0 20px white;
    background-color: #9671dc;
}
.uname[guard_level='1'] {
    box-shadow: 0 0 0 10px #ecb3b3, 0 0 0 20px white;
    background-color: #dc7171;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 100px); /* 初始位置 */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0); /* 位移100px向上 */
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}